<template>
  <Back />
  <div class="bg-#fafafa">
    <van-image width="100%" height="300px" :src="product.img" fit="contain" />
    <div class="title">
      {{ product.name }}
    </div>
    <div class="options">
      <div class="color-red font-bold">{{ $t('agent.productPrice') }}{{ product.price }} cym</div>
      <div>{{ $t('agent.totalAmount') }}{{ product.totalAmount }}</div>
      <div>{{ $t('agent.currAmount') }}{{ product.currAmount }}</div>
      <div>{{ $t('agent.maxAmount') }}{{ product.maxAmount }}</div>
      <div>{{ $t('agent.yourAmount') }}{{ count }}</div>
      <div>{{ $t('prize.startTime') }}{{ product.startTime }}</div>
      <div>{{ $t('prize.endTime') }}{{ product.endTime }}</div>
    </div>

    <div class="intro" v-if="product.intro && product.intro.length > 0">
      <p>{{ t('prize.intro') }}</p>
      <div>
        {{ product.intro }}
      </div>
    </div>

    <div class="foot">
      <div class="p-x-12px flex p-t-12px justify-between font-size-1.4rem">
        <div>{{ $t('agent.number') }}</div>
        <div class="font-bold">{{ user?.agentNumber }}</div>
      </div>
      <div class="p-x-12px p-t-12px font-size-1.4rem flex justify-between items-center">
        <div class="">{{ t('common.cash') }}</div>
        <div>{{ user?.cash }}</div>
      </div>
      <div class="p-12px bg flex justify-between items-center font-size-1.4rem color-#3AA1A2" @click="choosePickup">
        <div>{{ $t('agent.choose') }}</div>
        <div class="flex items-center">
          <div>{{ user && user.pickUpName ? user.pickUpName : 'choose' }}</div>
          <van-icon name="arrow" color="#3AA1A2" />
        </div>
      </div>
      <van-button type="primary" :loading="store.loading" :disabled="disbleButton" block @click="partake">
        {{ buttonText }}
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const { t } = useI18n()
const route = useRoute()
const store = useAppStore()
const router = useRouter()

const user = ref<ApiUser>()
const count = ref(0)

const id = route.query.id

const product = ref<ApiAgentProduct>({} as ApiAgentProduct)

onMounted(() => {
  apis.api.userAgentInfo().then(d => (user.value = d))
  apis.api.userAgentProductTook({ id: id }).then(d => (count.value = d))
  apis.api.userAgentProductDetail({ id: id }).then(data => (product.value = data))
})

const disbleButton = computed(() => {
  return buttonText.value !== t('agent.partake')
})

const buttonText = computed(() => {
  if (!product.value || !product.value.id) {
    return ''
  }

  if (product.value.currAmount >= product.value.totalAmount) {
    return t('agent.over')
  }

  if (count.value + 1 > product.value.maxAmount) {
    return t('agent.overMax')
  }

  const now = dayjs()
  const start = dayjs(product.value.startTime)
  const end = dayjs(product.value.endTime)

  if (now.isAfter(end) || now.isBefore(start)) {
    return t('prize.end')
  }

  return t('agent.partake')
})

function choosePickup() {
  const href = '/agentPickUps?back=' + encodeURIComponent('/agentProduct?id=' + id)
  router.push(href)
}

const beforeClose = (action: string) => {
  return new Promise(resolve => {
    if (action == 'confirm') {
      apis.api
        .userAgentProductPartake({ id: product.value.id, shopId: user.value!.pickUpId! })
        .then(() => router.push('/agentOrders'))
        .finally(() => resolve(true))
    } else {
      resolve(true)
    }
  })
}

const partake = () => {
  if (product.value && product.value.id) {
    showConfirmDialog({
      title: t('agent.confirmProduct'),
      message: t('agent.confirmCash') + ':' + user.value?.cash + '\n' + t('agent.pickShop') + ':' + user.value?.pickUpName,
      confirmButtonText: t('common.sure'),
      cancelButtonText: t('common.cancel'),
      beforeClose: beforeClose
    })
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 1.8rem;
  padding: 0 16px;
  line-height: 50px;
  border-bottom: 1px solid #dcdcdc;
  background-color: #fff;
}
.options {
  padding: 16px;
  background-color: #fff;
  div {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }
}
.intro {
  margin-top: 1.2rem;
  background-color: #fff;
  padding-bottom: 180px;
  p {
    padding: 0 16px;
    margin: 0;
    font-size: 1.4rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #dcdcdc;
  }
  div {
    padding: 16px;
    color: #666;
    font-size: 1.4rem;
  }
}

.action {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
  border-top: 1px solid #dcdcdc;
  padding: 12px;
  box-sizing: border-box;
}
.foot {
  border-top: 1px solid #dcdcdc;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.red {
  color: #f00;
}
</style>
